<template>
    <section>
        <router-view></router-view>
        <div v-show="$route.path==='/deliver'"  class="order_out">
            <el-col :span="24" class="order_out_title">
                <i class="fa fa-list"></i>
                <span class="grid-content bg-purple-dark">待发货订单列表</span>
                <el-form :inline="true" :model="filter" style="margin-left: 20px;display: inline-block;">
                    <el-form-item label="" prop="">
                        <el-input  size="small" v-model="filter.deliver_number" auto-complete="off" :maxlength="20"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="success" v-model="filter.deliver_number" @click="handleList">查询</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="handleAddlist">新增</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="default"  @click="handleRestFilters">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-col class="order_out_tb">
                <el-table
                        ref="multipleTable"
                        :data="simulateData"
                        tooltip-effect="dark"
                        style="width: 100%"
                        v-loading="listLoading"
                        :border='true'>
                    <el-table-column
                            type="selection"
                            align="center"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            label="订单号"
                            align="center"
                            prop="number"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="客户名称"
                            align="center"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="status"
                            label="状态"
                            align="center"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            prop="total"
                            label="总计"
                            align="center"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            prop="dateCreate"
                            label="生成日期"
                            align="center"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            prop="dateUpdate"
                            label="修改日期"
                            align="center"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            prop="edit"
                            label="编辑"
                            align="center"
                            show-overflow-tooltip>
                        <template slot-scope="scope">
                            <router-link to="/deliver/manage">
                                <el-button type="primary" size="small">
                                    <i class='fa fa-eye'></i>
                                </el-button>
                            </router-link>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
            <el-col>
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :page-size=filter.pageSize
                        layout="total, sizes, prev, pager, next, jumper"
                        :total=total>
                </el-pagination>

            </el-col>
        </div>
    </section>
</template>

<script>
    import {getOrderDeliver,addOrderDeliver} from "../../api/api"
    export default {
        data() {
            return {
                listLoading: false,
                total: 20,
                filter: {
                   pageSize: 10,
                   page: 1,
                   deliver_name: "",
                   deliver_number: ""
                },
                simulateData: [],
                addForm: {
                   deliver_name: "",
                   deliver_number: ""
                }
            }
        },
        methods: {
            //分页改变
            handleCurrentChange(val) {
//            console.log(val); //val就是页码数
                this.filters.page = val;
                this.handleList();
            },
            //条数改变
            handleSizeChange(size) {
                this.filters.pageSize = size;
                this.handleList();
            },
            handleList(){
                this.listLoading=true;
                getOrderDeliver(this.filters).then((res)=>{
                    this.simulateData=res;
                    this.total=res.length;
                    this.listLoading=false;
                })
            },
            //重置
            handleRestFilters(){
                this.filter={
                    pageSize: 10,
                    page: 1,
                    deliver_name: "",
                    deliver_number: ""
                };
                this.handleList();
            },
            //新增
            handleAddlist(){
                this.$refs("addForm").validte((valid)=>{
                    if(valid){
                        this.listLoading=true;
                        addOrderDeliver(this.filter).then((res)=>{
                            this.listLoading=false;
                            if(parseInt(res.status)===1){
                                this.handleList();
                                this.$refs["addForm"].resetFields();
                            }
                        })
                    }
                })
            }
        },
        mounted(){
            this.handleList();
        }
    }
</script>

<style lang="scss" scoped>
 .order_out {
     margin-top: 10px;
     border: 1px solid #E7E7E7;
     border-top: 2px solid #E7E7E7;
     padding: 0;
     height: 800px;
     .order_out_title {
         margin: 0;
         border-bottom: 1px solid #E7E7E7;
         background-color: #FCFCFC;
         height: 50px;
         line-height: 50px;
         padding-left: 20px;
         .el-form-item {
             margin-top: 6px;
         }
       i {
             margin-right: 5px;
         }
     }
     .order_out_tb {
         padding: 15px;
     }
 }
</style>